:root{
  --background-color--: gray;

  --header-height--: 55px;
  --menu-item-size--: 40px;
  --status-height--:24px;
  --link-button-size--: 120px;
  --container-height--: calc(100vh - 55px - 40px - 24px);

  --header-background-color--: white;
  
  --menu-background-color--: white;

  --body-background-color--: white;
  --status-background-color--: white;

  --control-panel-width--: 320px;

  --preview-height--: 280px;
  --preview-width--: 320px;
  
}

body{
  background-color: var(--background-color--);
}

.Main{
  display: flex;
  flex-direction: column;
  
  width: 100vw;
  height: 100vh;

  justify-content: center;

  overflow: hidden;
}

.Main-Header {
  display: flex;
  flex-direction: row;

  background-color: var(--header-background-color--);
  height: var(--header-height--);

  justify-content: center;

  /* border-bottom: 1px dashed gray; */
  overflow: hidden;
}
  .Main-Header img {
    animation: spin infinite 3s linear;
  }
  .Main-Header h1 {
    margin: auto 0 auto 0;
    text-shadow: 0 2px 5px gray;
  }

.Main-Menu {
  display: flex;
  flex-direction: row;

  -webkit-user-select: none;
  user-select: none;
  
  background-color: var(--menu-background-color--);
  border-top: 2px solid gray;
}
  .Main-Menu .Menu-Item {
    display: flex;
    flex-direction: column;

    height: var(--menu-item-size--);
    width: var(--menu-item-size--);

    margin: 2px;

    justify-content: center;
    text-align: center;
    
    box-sizing: border-box;
    border: 1px dashed gray;
    border-radius: 15%;

  }

  .Main-Menu .Menu-Item:hover {
    cursor: pointer;
    
    box-shadow: 3px 3px gray;
    border: 1px solid white;
  }

  .Main-Menu .checked {
    background-color: green;
  }

  .Main-Menu .unchecked {
    background-color: gray;
  }

.Main-Body {
  display: flex;
  flex-direction: row;
  margin: 2px;
  height: var(--container-height--);
  background-color: var(--body-background-color--);
}
  .Main-Body .Control-Panel{
    display: flex;
    flex-direction: column;
    min-width: var(--control-panel-width--);
    justify-content: center;
    box-sizing: border-box;
    /* border-right: 1px dashed gray; */
  }

  .Main-Body .Control-Panel .Panel {
    display: table;
    flex: 1;

    max-width: var(--control-panel-width--);
    border-bottom: 1px solid gray;

    overflow: auto;
  }

  .Main-Body .Control-Panel .Panel .row {
    display: table-row;
  }

  .Main-Body .Control-Panel .Panel .row .cell{
    display: table-cell;

    vertical-align: middle;
    border-bottom: 1px dashed gray;
  }

  .Main-Body .Control-Panel .Switches {
    display: flex;
  }

  .Main-Body .Control-Panel .Preview {
    
    width: var(--preview-width--);
    height: var(--preview-height--);

    box-sizing: border-box;
    border-top: 1px dashed black;

    overflow: hidden;
  }

  .Main-Body .Mainview {
    
    flex: auto;
    margin: 5px;

    box-sizing: border-box;
    border: 1px solid green;

    overflow: hidden;
  }

.container {
  width: 100%;
  height: 100%;
}

.hidden {
  display: none;
}

.Main-status {
  display: flex;
  flex-direction: row;
  background-color: var(--status-background-color--);
  height: var(--status-height--);

  /* justify-content: flex-start; */

  box-sizing: border-box;
  /* border-top: 1px dashed gray; */
}

  .Main-status label{
    font-style: italic;
    font-size: small;
    margin: auto 2px auto 0;
  }

.Top-Panel { 
  position: absolute;
  background: rgba(148, 206, 154, 0.5);

  top:10vh;
  left:10vw;

  width: 80vw;
  height: 80vh;

  z-index: 999;
  border: 1px solid gray;
}

  .Top-Panel .close {
    position:absolute;
    right: 0;
    bottom: 0;
  }

.Flex-Row {
  height: 100%;
  width: 100%;

  display: flex;
  flex-direction: row;

  justify-content: space-between;
  align-items: center;

  flex-wrap: wrap;
  overflow: auto;
}

.Link-Button {
  display: flex;

  background: white;

  width: var(--link-button-size--);
  height: var(--link-button-size--);

  -webkit-user-select: none;
  user-select: none;

  justify-content: center;
  align-items: center;

  margin: 5px;
  border: 1px solid gray;
}

.Link-Button:hover {
  cursor: pointer;
  background-color: gold;
  box-shadow: 5px 5px gray;
  border-radius: 10%;
  animation: border-spin infinite 1s linear;
}

.Camera {
  width: 100%;
  height: 100%;

  /* box-sizing: border-box;
  border: 1px solid red; */
}

.Flex-Table {
  display: table;
}
  .Flex-Table .group {
    width: 100%;
    font-weight: bold;
    font-size: larger;
    padding: 0 0 0 0;
    margin: 1ex 0 1ex 0;
    border-bottom: 2px solid black;
  }

  .Flex-Table .row {
    display: table-row;
    /* box-sizing: border-box;
    border-bottom: 1px dashed black; */
  }

  .Flex-Table .row .cell {
    display: table-cell;
  }

  .Flex-Table .row .cell label{
    margin: auto 1em auto 1em;
  }


.flex-fullfill {
  flex: 1;
}

.Panel-Checked {
  color: green;
}

.Panel-Unchecked {
  color: gray;
}

@keyframes rgb-blink {
  0% { background-color: white; }
  25% { background-color: red; }
  50% { background-color: green; }
  75% { background-color: blue; }
  100% { background-color: white; }
}

@keyframes border-spin {
  0% { 
    border-top: 2px dashed #ff0000;
    border-right: 2px dashed #000000;
    border-bottom: 2px dashed #000000;
    border-left: 2px dashed #000000;
  }
  25% { 
    border-top: 2px dashed #000000;
    border-right: 2px dashed #ff0000;
    border-bottom: 2px dashed #000000;
    border-left: 2px dashed #000000;
  }
  50% { 
    border-top: 2px dashed #000000;
    border-right: 2px dashed #000000;
    border-bottom: 2px dashed #ff0000;
    border-left: 2px dashed #000000;
  }
  75% { 
    border-top: 2px dashed #000000;
    border-right: 2px dashed #000000;
    border-bottom: 2px dashed #000000;
    border-left: 2px dashed #ff0000;
  }
  100% { 
    border-top: 2px dashed #ff0000;
    border-right: 2px dashed #000000;
    border-bottom: 2px dashed #000000;
    border-left: 2px dashed #000000;
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg);}
}
